﻿@{
    Layout = "~/Views/Shared/_Form.cshtml";
}
@using Raffles.OA.Utility
<link href="~/Content/plugin/jquery-ui/jquery-ui.min.css" rel="stylesheet" />
<script src="~/Content/plugin/jquery-ui/jquery-ui.min.js"></script>

<link href="~/Content/plugin/jquery.smartwizard/css/smart_wizard.min.css" rel="stylesheet" />
<script src="~/Content/plugin/jquery.smartwizard/js/jquery.smartWizard.js"></script>

<link href="~/Content/plugin/highlight/css/vs.min.css" rel="stylesheet" />
<script src="~/Content/plugin/jquery-ui/highlight.pack.min.js"></script>

<script src="~/Content/plugin/jquery/jquery.tmpl.js"></script>

<link href="~/Content/plugin/bootstrap.table/1.12.0/bootstrap-table.min.css" rel="stylesheet" />
<script src="~/Content/plugin/bootstrap.table/1.12.0/bootstrap-table.min.js"></script>
<script src="~/Content/plugin/bootstrap.table/1.12.0/locale/bootstrap-table-zh-CN.js"></script>
<script src="~/Content/framework/js/framework-bootstrap-table-plugin.js"></script>
<style>
    .div-step {
        overflow: hidden;
    }

    .div-step-container { 
        height:350px;
        overflow-y: auto
    }

    .droppable-active {
        background-color: #ffe !important
    }

    .tools a {
        cursor: pointer;
        font-size: 80%;
        margin-right: 6px;
    }

    .draggable {
        cursor: move
    }
</style>
<div style="padding:0 10px;">
    <div id="smartwizard">
        <ul>
            <li><a href="#step-1">1<br />基本配置</a></li>
            <li><a href="#step-2">2<br />字段信息</a></li>
            <li><a href="#step-3">3<br />代码预览</a></li>
            <li><a href="#step-4">4<br />生成完毕</a></li>
        </ul>
        <div>
            <div id="step-1" class="div-step">
                <div class="div-step-container">
                    <div class="panel panel-default" style="margin-bottom:5px">
                        <div class="panel-heading">
                            <h3 class="panel-title">
                                文件名配置
                            </h3>
                        </div>
                        <div class="panel-body">
                            <form id="fileConfigForm" class="form-horizontal m">
                                <div class="form-group">
                                    <div class="col-sm-4">
                                        <label class="col-sm-4 control-label ">命名空间<span class="text-red"> *</span></label>
                                        <div class="col-sm-8">
                                            <input id="nameSpace" name="nameSpace" col="NameSpace" type="text" class="form-control required" />
                                        </div>
                                    </div>
                                    <div class="col-sm-4">
                                        <label class="col-sm-4 control-label ">代码描述<span class="text-red"> *</span></label>
                                        <div class="col-sm-8">
                                            <input id="classDescription" name="classDescription" col="ClassDescription" type="text" class="form-control required" />
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="col-sm-4">
                                        <label class="col-sm-4 control-label ">类名前缀<span class="text-red"> *</span></label>
                                        <div class="col-sm-8">
                                            <input id="classPrefix" name="classPrefix" col="ClassPrefix" type="text" class="form-control required" />
                                        </div>
                                    </div>
                                    <div class="col-sm-4">
                                        <label class="col-sm-4 control-label ">区域名称<span class="text-red"> *</span></label>
                                        <div class="col-sm-8">
                                            <input id="areaName" name="areaName" col="AreaName" type="text" class="form-control required" />
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="col-sm-4">
                                        <label class="col-sm-4 control-label ">实体类名<span class="text-red"> *</span></label>
                                        <div class="col-sm-8">
                                            <input id="entityName" col="EntityName" type="text" data-suffix="Entity" readonly="readonly" class="form-control" />
                                        </div>
                                    </div>
                                    <div class="col-sm-4">
                                        <label class="col-sm-4 control-label ">控制器名<span class="text-red"> *</span></label>
                                        <div class="col-sm-8">
                                            <input id="controllerName" col="ControllerName" type="text" data-suffix="Controller" value="Controller" readonly="readonly" class="form-control" />
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="col-sm-4">
                                        <label class="col-sm-4 control-label ">列表页名<span class="text-red"> *</span></label>
                                        <div class="col-sm-8">
                                            <input id="pageIndexName" col="PageIndexName" type="text" value="Index" readonly="readonly" class="form-control" />
                                        </div>
                                    </div>
                                    <div class="col-sm-4">
                                        <label class="col-sm-4 control-label ">表单页名<span class="text-red"> *</span></label>
                                        <div class="col-sm-8">
                                            <input id="pageFormName" col="PageFormName" type="text" value="Form" readonly="readonly" class="form-control" />
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="col-sm-4">
                                        <label class="col-sm-4 control-label ">表单列数<span class="text-red"> *</span></label>
                                        <div class="col-sm-8">
                                            <select class="form-control" id="showMode">
                                                <option value="1">显示1列</option>
                                                <option value="2">显示2列</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-sm-4">
                                        <label class="col-sm-4 control-label ">创建日期</label>
                                        <div class="col-sm-8">
                                            <input id="createDate" col="CreateDate" type="text" class="form-control" value="@DateTime.Now.ToDateTimeString()" readonly />
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            <div id="step-2" class="div-step">
                <div class="div-step-container">
                    <div class="col-xs-12">
                        <div class="box box-info">
                            <div class="box-body">
                                <div class="table-responsive">
                                    <table id="gridTable" class="table table-hover table-striped text-nowrap">
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div id="step-3" class="div-step">
                <ul class="nav nav-tabs">
                    <li class="active"><a href="#codeEntity" data-toggle="tab">实体类</a></li>
                    <li><a href="#codeParam" data-toggle="tab">参数类</a></li>
                    <li><a href="#codeController" data-toggle="tab">控制器</a></li>
                    <li><a href="#codeIndex" data-toggle="tab">列表页</a></li>
                    <li><a href="#codeForm" data-toggle="tab">表单页</a></li>
                    <li><a href="#codeMenu" data-toggle="tab">菜单</a></li>
                </ul>
                <div class="div-step-container" style="height:310px;overflow-y: auto">
                    <div class="tab-content">
                        <div class="tab-pane fade in active" id="codeEntity" col="CodeEntity"> </div>
                        <div class="tab-pane fade" id="codeParam" col="CodeParam"></div>
                        <div class="tab-pane fade" id="codeController" col="CodeController"></div>
                        <div class="tab-pane fade" id="codeIndex" col="CodeIndex"></div>
                        <div class="tab-pane fade" id="codeForm" col="CodeForm"></div>
                        <div class="tab-pane fade" id="codeMenu" col="CodeMenu"></div>
                    </div>
                </div>
            </div>
            <div id="step-4" class="div-step">
                <div class="div-step-container">
                    <h5>输出文件位置：</h5>
                    <form id="outputListForm" class="form-horizontal m"></form>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    var tableName = frame.request("tableName");
    var codeList; //预览的代码
    $(function () {
        classPrefixChange();

        $("#smartwizard").on("leaveStep", function (e, anchorObject, stepNumber, stepDirection) {
            switch (stepNumber + 1) {
                case 1:
                    if (!$("#fileConfigForm").validate().form()) {
                        return false;
                    }
                    else {
                        initGrid();
                    }
                    break;
                case 2:
                    codePreview();
                    break;
                case 3:
                    codeGenerate();
                    break;
            }
            return true;
        });

        // Smart Wizard
        $('#smartwizard').smartWizard({
            selected: 0,
            theme: 'arrows',
            transitionEffect: 'fade',
            toolbarSettings: {
                toolbarPosition: 'bottom',
                toolbarExtraButtons: [{ label: '关闭', css: 'btn-info', onClick: function () { frame.closeDialog(); } }]
            }
        });
        $("#reset-btn").on("click", function () {
            $('#smartwizard').smartWizard("reset");
            return true;
        });

        $("#prev-btn").on("click", function () {
            $('#smartwizard').smartWizard("prev");
            return true;
        });

        $("#next-btn").on("click", function () {
            $('#smartwizard').smartWizard("next");
            return true;
        }); 
        
    });

    function classPrefixChange() {
        $("#classPrefix").keyup(function () {
            var classPrefix = $(this).val();
            $("#fileConfigForm input").each(function (i, ele) {
                var suffix = $(ele).attr("data-suffix");
                if (!frame.isNullOrEmpty(suffix)) {
                    if (suffix == "Entity") {
                        $(ele).val(classPrefix);
                    }
                    else {
                        $(ele).val(classPrefix + $(ele).attr("data-suffix"));
                    }
                }
            });
        });
    }
    function codePreview() {
        var postData = {};
        postData.TableName = tableName;
        postData.FileConfig = $("#fileConfigForm").getWebControls();
        postData.FileConfig.ShowMode = $('#showMode option:selected').val();
        var tbData = [];
        $("#gridTable tbody").find('tr').each(function (i) {
            tbData.push({
                TableColumn: $(this).find('td').eq(0).text(),
                Datatype: $(this).find('td').eq(1).text(),
                Remark: $(this).find('td').eq(2).find("input").val(),
                IsList: $(this).find('td').eq(3).find("input:checkbox").is(':checked'),
                IsEdit: $(this).find('td').eq(4).find("input:checkbox").is(':checked'),
                IsRequire: $(this).find('td').eq(5).find("input:checkbox").is(':checked'),
                FormType: $(this).find('td').eq(6).find("select").val(),
                BindDicCode: $(this).find('td').eq(7).find("select").val(),
            });
        })
        postData.tableField = tbData;
        frame.ajax({
            url: '@Url.Content("/Manage/Generator/CodePreviewComplexJson")',
            type: "post",
            async: false,
            data: postData,
            success: function (obj) {
                if (obj.success) {
                    var result = obj.data;
                    $("div.tab-pane").each(function (i, ele) {
                        var col = $(ele).attr("col");
                        if (col == "CodeMenu") {
                               $(this).html("<pre class='no-padding no-margin no-top-border'><code class='html'>" + result[col] + "</code></pre>");
                        }
                        else {
                            $(this).html("<pre class='no-padding no-margin no-top-border'><code class='csharp'>" + result[col] + "</code></pre>");
                        }
                    });
                    $('pre code').each(function (i, ele) {
                        hljs.highlightBlock(ele)
                    });
                    codeList = result;
                }
                else {
                    frame.msgError(obj.message);
                }
            }
        });
    }
    function codeGenerate() {
        var postData = {};
        postData.TableName = tableName;
        postData.FileConfig = $("#fileConfigForm").getWebControls();
        postData.Code = encodeURIComponent(JSON.stringify(codeList));
        frame.ajax({
            url: '@Url.Content("/Manage/Generator/CodeGenerateJson")',
            type: "post",
            async: false,
            data: postData,
            success: function (obj) {
                $("#outputListForm").find("div").remove();
                if (obj.success) {
                    for (var i = 0; i < obj.data.length; i++) {
                        var html = "<div class='form-group'><label class='col-sm-2 control-label'>" + obj.data[i].Key + "</label>" +
                            "<label class='col-sm-10 control-label' style='text-align:left'>" + obj.data[i].Value + "</label></div>";
                        $("#outputListForm").append(html);
                    }
                }
                else {
                    frame.msgError(obj.message);
                }
            }
        });
    }
    function initGrid() {
        var queryUrl = '@Url.Content("/Manage/Generator/GetTableFieldListJson")' + '?tableName=' + tableName;
        $('#gridTable').frameTable({
            url: queryUrl,
            pagination: false,
            columns: [
                { field: 'TableColumn', title: '字段列名', width: 180, halign: "center", align: "center",width:'12%' },
                { field: 'Datatype', title: '数据类型', width: 180, halign: "center", align: "center" },
                {
                    field: 'Remark', title: '字段描述', halign: "center", align: "center",
                    formatter: function (value, row, index) {
                        if (row.TableColumn.toLowerCase() == 'id') {
                            return "<input class='form-control' type='text'   value='主键'>";
                        } else {
                            return "<input class='form-control' type='text'   value='" + value + "'>";
                        }
                        
                    }
                },
                {
                    field: 'isList',
                    title: '列表', halign: "center", align: "center",
                    formatter: function (value, row, index) {
                        if (row.TableColumn == 'Id' ||
/*                            row.TableColumn == 'EnabledMark' ||*/
                            row.TableColumn == 'DeletedMark' ||
                            row.TableColumn == 'CreatedBy' ||
                            row.TableColumn == 'CreatedOn' ||
                            row.TableColumn == 'UpdatedBy' ||
                            row.TableColumn == 'UpdatedOn') {
                            return "<label class='check-box'><input type='checkbox' disabled></label>";
                        }
                        else {
                            return "<label class='check-box'><input type='checkbox' checked></label>";
                        }
                    }
                },
                {
                    field: 'isEdit',
                    title: '编辑', halign: "center", align: "center",
                    formatter: function (value, row, index) {
                        if (row.TableColumn == 'Id' ||
/*                            row.TableColumn == 'EnabledMark' ||*/
                            row.TableColumn == 'DeletedMark' ||
                            row.TableColumn == 'CreatedBy' ||
                            row.TableColumn == 'CreatedOn' ||
                            row.TableColumn == 'UpdatedBy' ||
                            row.TableColumn == 'UpdatedOn') {
                            return "<label class='check-box'><input type='checkbox' disabled></label>";
                        }
                        else {
                            return "<label class='check-box'><input type='checkbox' checked></label>";
                        }
                    }
                },
                {
                    field: 'isRequired',
                    title: '必填', halign: "center", align: "center",
                    formatter: function (value, row, index) {
                        if (row.TableColumn == 'Id' ||
/*                            row.TableColumn == 'EnabledMark' ||*/
                            row.TableColumn == 'DeletedMark' ||
                            row.TableColumn == 'CreatedBy' ||
                            row.TableColumn == 'CreatedOn' ||
                            row.TableColumn == 'UpdatedBy' ||
                            row.TableColumn == 'UpdatedOn') {
                            return "<label class='check-box'><input type='checkbox' disabled></label>";
                        }
                        else {
                            return "<label class='check-box'><input type='checkbox' checked></label>";
                        }
                    }
                },
                {
                    field: 'htmlType',
                    title: '表单类型', halign: "center", align: "center", width: '13%',
                    formatter: function (value, row, index) {
                        var data = [{ index: index, htmlType: value }];
                        return $("#htmlTypeTpl").tmpl(data).html();
                    }
                },
                {
                    field: 'dictType',
                    title: '绑定字典', halign: "center", align: "center", width: '13%',
                    formatter: getDicData
                }
            ]
        });
    }
    function getDicData() {
        var result = '';
        frame.ajax({
            url: '@Url.Content("/Manage/Dictionary/GetDictionaryList")',
            type: "get",
            async: false,
            success: function (obj) {
                if (obj.success) {
                    var html = [];
                    html.push("<select class='form-control'>");
                    html.push("<option value=''>请选择</option>");
                    $.each(obj.data, function (i, n) { 
                        html.push('<option value=' + n.DicType + '>' + n.Description + '</option>');
                    })
                    html.push("</select>");
                    result= html.join('');
                }
            }
        });
        return result;
    }

</script>
<!-- 查询方式 -->
<script id="queryTypeTpl" type="text/x-jquery-tmpl">
    <div>
        <select class='form-control' name='columns[${index}].queryType'>
            <option value="EQ" {{if queryType==="EQ"}} selected{{/if}}>=</option>
            <option value="NE" {{if queryType==="NE"}} selected{{/if}}>!=</option>
            <option value="GT" {{if queryType==="GT"}} selected{{/if}}>></option>
            <option value="GTE" {{if queryType==="GTE"}} selected{{/if}}>>=</option>
            <option value="LT" {{if queryType==="LT"}} selected{{/if}}><</option>
            <option value="LTE" {{if queryType==="LTE"}} selected{{/if}}><=</option>
            <option value="LIKE" {{if queryType==="LIKE"}} selected{{/if}}>Like</option>
        </select>
    </div>
</script>

<!-- 显示类型 -->
<script id="htmlTypeTpl" type="text/x-jquery-tmpl">
    <div>
        <select class='form-control' name='columns[${index}].htmlType'>
            <option value="input" {{if htmlType==="input"}} selected{{/if}}>文本框</option>
            <option value="textarea" {{if htmlType==="textarea"}} selected{{/if}}>文本域</option>
            <option value="select" {{if htmlType==="select"}} selected{{/if}}>下拉框</option>
            <option value="radio" {{if htmlType==="radio"}} selected{{/if}}>单选框</option>
            <option value="checkbox" {{if htmlType==="checkbox"}} selected{{/if}}>复选框</option>
            <option value="datetime" {{if htmlType==="datetime"}} selected{{/if}}>日期控件</option>
        </select>
    </div>
</script>